<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5.5javascript基础-事件绑定</title>
</head>
<body>
  <button onclick="show()">HTML标签事件绑定</button>
  <button id="btn2">js事件绑定</button>
  <button id="btn3">事件监听</button>
  <button id="btn4">移除事件监听</button>
  <div class="m-div" style="background: red;width: 100px;height: 100px;"></div>
  <script>
    function show() {
      console.log("HTML标签事件绑定")
    }
    function show2() {
      console.log("js事件绑定")
    }
    function show3() {
      console.log("事件监听")
    }
    var btn2Dom = document.querySelector("#btn2")
    btn2Dom.onclick = show2
    var btn3Dom = document.querySelector("#btn3")
    btn3Dom.addEventListener('click',show3)
    var btn4Dom = document.querySelector("#btn4")
    btn4Dom.onclick = function() {
      // 移除监听事件
      btn3Dom.removeEventListener('click',show3)
    }
    var divDom = document.querySelector(".m-div")
    // 鼠标移入某个元素时触发
    divDom.onmouseover = function() {
      divDom.style.background='yellow'
    }
    // 鼠标移出某个元素时触发
    divDom.onmouseout = function() {
      divDom.style.background='red'
    }
  </script>
</body>
</html>